<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子的垂直水平居中</title>
</head>
<body>
<div class="father">
    <div class="son">我是子盒子</div>
</div>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .father {
        width: 500px;
        height: 500px;
        background: gray;

        display: table-cell;
        /*设置元素对齐的方式*/
        vertical-align: middle;
        /*文本的水平对齐方式*/
        text-align: center;
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
    }
    .son{

        background: pink;
        display: inline-block;
    }

    /*定位一:子元素定宽高 margin:auto*/
    /*.son {*/
    /*    width: 200px;*/
    /*    height: 200px;*/
    /*    position: absolute;*/
    /*    left: 0;*/
    /*    top: 0;*/
    /*    bottom: 0;*/
    /*    right: 0;*/
    /*    margin: auto;*/
    /*    background: pink;*/
    /*}*/

    /*定位二：负margin法*/
    /*.son{*/
    /*    width: 200px;*/
    /*    height: 200px;*/
    /*    position: absolute;*/
    /*    left: 50%;*/
    /*    top: 50%;*/
    /*    !*宽的一半*!*/
    /*    margin-left: -100px;*/
    /*    !*高的一半*!*/
    /*    margin-top: -100px;*/
    /*    background: pink;*/
    /*}*/
    /*定位三:transform:translate(-50%,-50%)*/
    /*.son{*/

    /*    position: absolute;*/
    /*    left: 50%;*/
    /*    top: 50%;*/
    /*    transform: translate(-50%,-50%);*/
    /*    background: pink;*/
    /*}*/

    /*定位四：display方式(父元素开启display:flex)*/
    /*.son{*/
    /*    width: 200px;*/
    /*    height: 200px;*/
    /*    background: pink;*/
    /*}*/

</style>
</body>
</html>
<script>

    /*/!*js控制css样式*!/
    // 获取父元素
    let fa = document.querySelector('.father')
    // 获取父元素的宽高
    fwidth = fa.clientWidth
    fheight = fa.clientHeight
    // 获取子元素
    let son = document.querySelector('.son')
    // 获取子元素的宽高
    swidth = son.offsetWidth
    sheight = son.offsetHeight

    son.style.position = 'absolute'
    son.style.left = (fwidth - swidth)/2 + 'px'
    son.style.top = (fheight - sheight)/2 + 'px'*/


</script>
